<template>
	<view
		class="circle-progress"
		:style="{
			width: width + 'rpx',
			height: width + 'rpx',
			backgroundColor: bgColor
		}"
	>
    <view class="circle" :style="{ borderWidth: borderWidth + 'rpx', borderColor: inactiveColor }"></view>
    <view
      v-show="percent"
      class="progress"
      :style="{
        borderWidth: borderWidth + 'rpx',
        borderColor: activeColor,
        clipPath: progressPolygon
      }"></view>
		<slot></slot>
	</view>
</template>

<script>
export default {
	name: 'circle-progress',
	props: {
		// 圆环进度百分比值
		percent: {
			type: Number,
			default: 0,
			// 值在0到100之间
			validator: val => {
				return val >= 0 && val <= 100;
			}
		},
		// 圆环底色（灰色的圆环）
		inactiveColor: {
			type: String,
			default: '#ececec'
		},
		// 圆环激活部分的颜色
		activeColor: {
			type: String,
			default: '#009dff'
		},
		// 圆环线条的宽度，单位rpx
		borderWidth: {
			type: [Number, String],
			default: 14
		},
		// 整个圆形的宽度，单位rpx
		width: {
			type: [Number, String],
			default: 200
		},
		// 圆环进度区域的背景色
		bgColor: {
			type: String,
			default: 'transparent'
		}
	},
	data() {
		return {
      progressPolygon: ''
		};
	},
  watch: {
    percent() {
      this.calcProgressStyle()
    }
  },
	mounted() {
    this.calcProgressStyle()
	},
	methods: {
    calcProgressStyle() {
      if (this.percent === 100) {
        this.progressPolygon = ''
        return;
      }
      if (this.percent <= 12.5) {
        this.progressPolygon = `polygon(50% 50%, 50% 0, ${ 50 + Math.tan(this.percent / 100 * 2 * Math.PI) * 50 }% 0);`
        return
      }
      if (this.percent <= 25) {
        this.progressPolygon = `polygon(50% 50%, 50% 0, 100% 0, 100% ${ 50 - Math.tan((25 - this.percent) / 100 * 2 * Math.PI) * 50 }%);`
        return
      }
      if (this.percent <= 37.5) {
        this.progressPolygon = `polygon(50% 50%, 50% 0, 100% 0, 100% ${ 50 + Math.tan((this.percent - 25) / 100 * 2 * Math.PI) * 50 }%);`
        return
      }
      if (this.percent <= 50) {
        this.progressPolygon = `polygon(50% 50%, 50% 0, 100% 0, 100% 100%, ${ 50 + Math.tan((50 - this.percent) / 100 * 2 * Math.PI) * 50 }% 100%);`
        return
      }
      if (this.percent <= 62.5) {
        this.progressPolygon = `polygon(50% 50%, 50% 0, 100% 0, 100% 100%, ${ 50 - Math.tan((this.percent - 50) / 100 * 2 * Math.PI) * 50 }% 100%);`
        return
      }
      if (this.percent <= 75) {
        this.progressPolygon = `polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 ${ 50 + Math.tan((75 - this.percent) / 100 * 2 * Math.PI) * 50 }%);`
        return
      }
      if (this.percent <= 87.5) {
        this.progressPolygon = `polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 ${ 50 - Math.tan((this.percent - 75) / 100 * 2 * Math.PI) * 50 }%);`
        return
      }
      if (this.percent <= 100) {
        this.progressPolygon = `polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, ${ 50 - Math.tan((100 - this.percent) / 100 * 2 * Math.PI) * 50 }% 0);`
      }
    },
	}
};
</script>

<style scoped lang="scss">
.circle-progress {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-style: solid;
}
.progress {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-style: solid;
}
</style>
